<template>
  <div>
    <div class="fbxj" :class="$store.state.tjwz==true?'fbxjtk':''">
      <div class="close" v-if="$store.state.tjwz">
        <a-icon type="close" @click="close" />
      </div>
      <a-form :form="form" @submit="subbtn">
        <ul>
          <li>
           
             <a-form-item label="产品分类：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
            <a-select
              showSearch
              placeholder="请选择分类"
              optionFilterProp="children"
              style="width: 500px"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
              :filterOption="filterOption"
               v-decorator="[
          'dlmc',
          {rules: [{ required: true, message: '请选择分类!' }]}
        ]"
            >
              <a-select-option v-for="(item,i) in zcfl" :key="i" :value="item">{{item}}</a-select-option>
            </a-select>
          </a-form-item>
          </li>
          <li>
            <span class="tit">
      
            </span>
            <a-form-item label="询价型号：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
              <a-input
                style="width:500px;"
                placeholder="请输入型号"
                v-decorator="[
          'xjxh',
          {rules: [{ required: true, message: '请输入型号！' }]}
        ]"
              />
            </a-form-item>
          </li>
          <li>
            <a-form-item label="要求品牌：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
              <a-input
                style="width:500px;"
                placeholder="请输入品牌"
                v-decorator="[
          'bran',
          {rules: [{ required: true, message: '请输入品牌!' }]}
        ]"
              />
            </a-form-item>
           
          </li>
          <li>
          
            <a-form-item label="需求数量：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
              <a-input-number
                class="input"
                :min="1"
                placeholder="请输入数量"
                :max="999999"
                v-decorator="[
          'xysl',
          {rules: [{ required: true, message: '请输入数量!' }]}
        ]"
              />
            </a-form-item>
          
          </li>
          <li>
            
            <a-form-item label="计量单位：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
              
              <a-select
                showSearch
                placeholder="请选择"
                optionFilterProp="children"
                style="width: 500px"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="jldwChange"
                :filterOption="filterOption"
                v-decorator="[
          'jldw',
          {rules: [{ required: true, message: '请选择单位!' }]}
        ]"
              >
                <a-select-option v-for="(item,i) in jldwdata" :key="i" :value="item">{{item}}</a-select-option>
              </a-select>
            </a-form-item>
          </li>
          <li>
            
            <a-form-item label="要求货期：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
              <a-date-picker
                class="input"
                @change="dateChange"
                placeholder="请选择货期"
                v-decorator="[
          'date',
          {rules: [{ required: true, message: '请选择货期!' }]}
        ]"
              />
            </a-form-item>
          </li>
          <li>
            <span>
            </span>
            <a-form-item label="收货地区：" :label-col="{ span: 3}" :wrapper-col="{ span: 12 }">
              <a-select
                showSearch
                placeholder="请选择地区"
                optionFilterProp="children"
                style="width: 500px"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="dqChange"
                :filterOption="filterOption"
                v-decorator="[
          'shdq',
          {rules: [{ required: true, message: '请选择地区!' }]}
        ]"
              >
                <a-select-option v-for="(item,i) in shdqdata" :key="i" :value="item">{{item}}</a-select-option>
             
              </a-select>
            </a-form-item>
        
          </li>
          <li>
            <span style="margin-left: 14px;">询价备注：</span>
            <a-textarea
              v-model="xk"
              style="width:500px;min-height:50px;vertical-align: top;"
              placeholder="选填,如规格细节等"
              autosize
            />
          </li>
          <li class="xj_btn">
            <a-button type="primary" html-type="submit" @submit="subbtn">确认提交</a-button>
         
            <a-button class="qx_btn" @click="close">取消</a-button>
          </li>
        </ul>
      </a-form>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  inject: ["reload"],
  data() {
    return {

      jldw: "",
      flcd: "",
      jhq: "",
      shdq: "",
      xk: "",
      zcfl: [],
      jldwdata: [],
      formLayout: "horizontal",
      form: this.$form.createForm(this),
      shdqdata: []
    };
  },

  methods: {
    dateChange(date, dateString) {
      this.jhq = dateString;
    },
    close() {

      this.reload();
      this.$store.state.tjwz = false;
    },
    handleChange(value) {
      this.flcd = value;
    },
   
  

    //发布询价
    subbtn(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log(values);
        this.axios
          .post(
            "xunjia/PushXunjia.php",
            qs.stringify({
              phone: this.$store.state.bbl_phone,
              sqdwid: this.$store.state.bbl_sqdwid,
              dlmc: this.flcd,
              gg: values.xjxh,
              pp: values.bran,
              sl: values.xysl,
              jldw: this.jldw,
              yqdhq: this.jhq,
              jhd: this.shdq,
              mxbz: this.xk
            })
          )
          .then(res => {
          
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg,
                duration: 1.5
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg,
                duration: 1.5
              });
            }
          });
        if (!err) {
        }
      });
   
    },
   
    jldwChange(value) {
    
      this.jldw = value;
    },
     dqChange(value) {
     
      this.shdq = value;
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取地区
    getshdq() {
      this.axios.post("xunjia/address.php").then(res => {
     
        if (res.data.code == 303) {
          this.shdqdata = res.data.result;
        }
      });
    },
    //获取分类
    getzcfl() {
      this.axios.post("xunjia/BearingClass.php").then(res => {
      
        if (res.data.code == 303) {
          this.zcfl = res.data.result;
         
        } else {
          console.log("失败");
        }
      });
    },
    //获取计量单位
    getjldw() {
      this.axios.post("xunjia/jldwlist.php").then(res => {
     
        if (res.data.code == 303) {
          this.jldwdata = res.data.result;
        }
      });
    }
  },

  created() {
    this.getzcfl();
    this.getshdq();
    this.getjldw();
  }
};
</script>

<style lang='less'>
.fbxjtk {
  position: absolute;
  width: 57%!important;
  left: 1%;
  background-color: #fff;
  top: 51px!important;
  left: 50%!important;
  transform: translateX(-50%)!important;
  box-shadow: 0px 0px 7px #ccc;
  text-align: left;
  padding: 11px 17px!important;
    .close {
    text-align: right;
    i {
      font-size: 20px;
    }
  }
   .xj_btn {
      width: 70%!important;
    }
}
.fbxj {
  position: absolute;
  width: 98%;
  left: 1%;
  background-color: #fff;
  top: 70px;
  box-shadow: 0px 0px 7px #ccc;
  text-align: left;
  padding: 30px 110px;

  .input {
    width: 500px;
  }
  ul {
    li:first-child {
      margin-bottom: 20px;
    }
    li {
      .bz_tit {
        width: 76px;
        text-align: right;
      }

      .yblist .cpimgfoot .uploadimg .avatar-uploader {
        line-height: 30px !important;
      }
      .tit {
      }
      .xing {
        color: #ff0000;
        padding: 0 4px;
      }
      .ant-form-item-label {
        width: 85px !important;
      }
    }
    .xj_btn {
      width: 30%;
      text-align: center;
      margin-left: 10%;
      margin-top: 10px;
      button {
        margin: 0 20px;
      }
      .qx_btn {
        width: 88px;
        background: #f5f5f5;
      }
    }
  }
}
</style>
